<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<%@ page import="java.util.*"%>
<%@ page import="savi.classes.Accounts"%>

<%
	// See if user is logged in, if not we redirect them to the login page
	Accounts accounts = Accounts.inst();

	if (accounts.getUser() == null) {
		response.sendRedirect(accounts.getLoginPage("/home.jsp"));
		return;
	}

	if (!accounts.modulesRetrieved()) {
		response.sendRedirect(accounts.getLoginPage("/settings.jsp"));
	}
%>

<html lang="en">
<head>
<meta charset="utf-8">
<title>StudyBuddy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="StudyBuddy">
<meta name="author" content="TeamOS">

<!-- Le styles -->
<link href="./css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
</style>
<link href="./css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
<link rel="apple-touch-icon" href="ico/apple-57x57.png">
<html lang="en">
<head>
<meta charset="utf-8">
<title>StudyBuddy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="StudyBuddy">
<meta name="author" content="TeamOS">

<!-- Le styles -->
<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/anytimec.css" rel="stylesheet">
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
</style>
<link href="./css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
<link rel="apple-touch-icon" href="ico/apple-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="ico/apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114"
	href="ico/apple-114x114.png">
</head>

<body>

	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a class="brand" href="#">StudyBuddy</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li><a href="/home.jsp"><i class="icon-home icon-white"></i>
								Home</a></li>
						<li><a href="/browse.jsp"><i
								class="icon-folder-open icon-white"></i> Browse</a></li>
						<li><a href="/archive.jsp"><i
								class="icon-warning-sign icon-white"></i> Archive</a></li>
						<li><a href="/settings.jsp"><i
								class="icon-cog icon-white"></i> Settings</a></li>
						<li><a href="javascript:logout();">Logout</a></li>
					</ul>
					<p class="navbar-text pull-right">
						Logged in as <a href="#"> <%
 	out.println(accounts.getUserName());
 %></a>
					</p>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3">
				<div class="well sidebar-nav">
					<ul class="nav nav-list">
						<li class="nav-header">Open Space</li>
						<li class="active"><a href="#">Link</a></li>
					</ul>
				</div>
				<!--/.well -->
			</div>
			<!--/span-->
			<div class="span6">
				<div class="hero-unit-middle">
					<h1>Create Event</h1>
					<p></p>
					<div class="alert alert-error">
						<p>Enter event details :</p>
					</div>
					<form class="form-horizontal" method="post" action=""
						name="addEvent" autocomplete="on">
						<fieldset>
							<div class="control-group">
								<label class="control-label">Module ID</label>
								<div class="controls">
									<input type="text" class="span3" placeholder="Type module code"
										name="moduleID" id="moduleID"> <span
										class="help-inline">Eg.CS3230, EG1108...</span>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Type</label>
								<div class="controls">
									<input type="text" class="span3" placeholder="Select type"
										name="type" id="type"> <span class="help-inline">Eg.Tutorial,
										Lab...</span>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Location</label>
								<div class="controls">
									<input type="text" class="span3" placeholder="Select location"
										name="location" id="location"> <span
										class="help-inline">Eg.CL, LT6...</span>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Start Time</label>
								<div class="controls">
									<input type="text" name="startTime" id="startTime"
										class="span3" value="2012/02/20 12:30" />
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">End Time</label>
								<div class="controls">
									<input type="text" name="endTime" id="endTime" class="span3"
										value="2012/02/20 14:30" />
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Description</label>
								<div class="controls">
									<textarea class="input-xlarge" rows="3"
										placeholder="(500) words" name="description" id="description"></textarea>
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<button type="submit" class="btn btn-primary"
										name="submitButton" id="submitButton"
										onclick="javascript:doAddEvent(document.getElementById('moduleID').value, document.getElementById('type').value, document.getElementById('location').value, document.getElementById('startTime').value, document.getElementById('endTime').value, document.getElementById('description').value);">
										<i class="icon-download-alt icon-white"></i>Submit
									</button>
									<button type="reset" class="btn">
										<i class="icon-remove"></i> Cancel
									</button>
								</div>
							</div>
						</fieldset>
					</form>

					<div class="progress progress-danger progress-striped active">
						<div class="bar" style="width: 40%;">Loading ...</div>
					</div>
				</div>
			</div>
			<!--/span-->
			<div class="span3">
				<div class="well sidebar-nav">
					<div class="alert alert-info-time">
						<br />
						<div class="alert alert-info" style="text-align: center;">
							<span id="date"></span> <span id="day"></span> <span id="clock"></span>
						</div>
					</div>
					<ul class="nav nav-list">
						<li class="nav-header">My Events</li>
						<li class="active"><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<a class="btn btn-success" name="createEvent" id="createEvent"
							title="Create an event - study groups, consultations, etc."
							href="http://sharvyis.appspot.com/create.jsp"><i
							class="icon-plus icon-white"></i> Create</a>
						<a class="btn btn-warning"><i class="icon-pencil icon-white"></i></a>
						<a class="btn btn-danger"><i class="icon-trash icon-white"></i></a>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</div>
				<!--/.well -->
			</div>
			<!--/row-->
		</div>
		<hr>

		<footer> <jsp:include page="./footer.jsp" /> </footer>

	</div>
	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="./js/tests/vendor/jquery.js"></script>
	<script src="./js/bootstrap-transition.js"></script>
	<script src="./js/bootstrap-alert.js"></script>
	<script src="./js/bootstrap-modal.js"></script>
	<script src="./js/bootstrap-dropdown.js"></script>
	<script src="./js/bootstrap-scrollspy.js"></script>
	<script src="./js/bootstrap-tab.js"></script>
	<script src="./js/bootstrap-tooltip.js"></script>
	<script src="./js/bootstrap-popover.js"></script>
	<script src="./js/bootstrap-button.js"></script>
	<script src="./js/bootstrap-collapse.js"></script>
	<script src="./js/bootstrap-carousel.js"></script>
	<script src="./js/bootstrap-typeahead.js"></script>
	<script src="./js/index.js"></script>
	<script src="./js/create.js"></script>
	<script src="./js/anytimec.js"></script>
	<script>
		AnyTime.picker("startTime", {
			format : "%d/%m/%Z %H:%i"
		});
	</script>
	<script>
		AnyTime.picker("endTime", {
			format : "%d/%m/%Z %H:%i"
		});
	</script>

</body>
</html>
